<template>
  <div>
    <div class = "card" style="margin-bottom: 5px;">
      <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="load">查 询</el-button>
      <el-button type="warning" @click="reset">重 置</el-button>
    </div>
    <div class = "card" style="margin-bottom: 5px">
<!--      <el-button type="primary" @click="handleadd">添 加</el-button>-->
      <el-button type="danger" @click="deleteBatch">批 量 删 除</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" border stripe string @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="序号" prop = "id"/>
        <el-table-column label="图片" prop = "url">
          <template #default="scope">
            <img v-if="scope.row.url" :src="scope.row.url" alt="" style="width: 40px;height: 40px;display:block; border-radius: 50%"  >
          </template>
        </el-table-column>
        <el-table-column label="房东id" prop = "roomId"/>
        <el-table-column label="图片url" prop = "url" show-overflow-tooltip/>
        <el-table-column label="创建时间" prop = "createTime" show-overflow-tooltip/>
        <el-table-column label="更新时间" prop = "updateTime" show-overflow-tooltip/>
        <el-table-column label="操作" width="120">
          <template #default="scope">
<!--            <el-button type="primary" :icon="Edit" circle @click="handleUpdate(scope.row)" ></el-button>-->
            <el-button type="danger"  :icon="Delete" circle @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 15px">
        <el-pagination
            @size-change="load"
            @current-change="load"
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            backgroudr
            layout="total, sizes, prev, pager, next,jumper"
            :total="data.total"
        />
      </div>
    </div>
    <el-dialog title="编辑图片信息" v-model="data.formVisible1"  width="500">
      <el-form :model="data.form" style="padding-right: 50px;padding-top: 20px">

        <el-form-item label="账号" label-width="80px">
          <el-input  v-model="data.form.username"  placeholder="请输入账号"autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" label-width="80px">
          <el-input v-model="data.form.name"  placeholder="请输入姓名" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" label-width="80px">
          <el-input v-model="data.form.phone"  placeholder="请输入电话号" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" label-width="80px">
          <el-input v-model="data.form.email" placeholder="请输入邮箱" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible1 = false">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </template>
    </el-dialog>




  </div>

</template>

<script setup>
import request from "../../utils/request.js";
import {Edit,Delete,Search} from '@element-plus/icons-vue'
import {ElMessage,ElMessageBox} from "element-plus";
import { reactive } from "vue";
const data = reactive({
  name:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0,
  formVisible1:false,
  ids:[],
  form:{
    id:null,
    roomId:null,
    url:null,
    createTime:null,
    updateTime:null

  }
})

const load =()=>{
  request.get('/roomImage/SelectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      name:data.name
    }
  }).then(res=>{
    data.tableData = res.data.list
    data.total = res.data.total
  })
}
load()

const reset = ()=>{
  data.name = null
  load()
}
// const handleadd = ()=>{
//   data.formVisible1 = true
//   data.form = {}
// }

// const handleUpdate= (row)=>{
//   data.form = JSON.parse(JSON.stringify(row))//深拷贝一个对象，这样编辑就不会影响行数据
//   data.formVisible1 = true
// }

const handleSelectionChange = (rows)=>{//返回选中所有的行
  //从选中的行数组里取出username组成一个新的数组ids
  data.ids = rows.map(row=>row.id)
  console.log(data.ids)
}


// const save =()=> {//有id为编辑，没有为新增
//   // data.form.id?update():add()
//   update()
//   data.formVisible1 = false
// }

// const add = ()=>{
//
//   request.post('/roomImage/add', data.form).then(res =>{
//     if (res.code === '200'){
//       ElMessage.success('操作成功')
//       load()
//     }else {
//       ElMessage.error(res.msg)
//     }
//   })
//
// }

// const update = ()=>{
//   request.put('/roomImage/update', data.form).then(res =>{
//     if (res.code === '200'){
//       ElMessage.success('操作成功')
//       load()
//     }else {
//       ElMessage.error(res.msg)
//     }
//   })
//
// }

const del =(id)=>{
  ElMessageBox.confirm('确定要删除该用户吗？', '提示', {type: 'warning'}).then(()=>{

    request.delete('/roomImage/delete', {
      params:{
        id:id
      }
    }).then(res =>{
      if (res.code === '200'){
        ElMessage.success('操作成功')
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }).catch()
}

const deleteBatch = ()=>{
  if (data.ids.length === 0) {
    ElMessage.warning('请选择要删除的用户')
    return
  }
  ElMessageBox.confirm('确定要删除这些用户吗？', '提示', {type: 'warning'}).then(()=>{
    request.delete('/roomImage/deleteBatch', {data:data.ids}).then(res =>{
      if (res.code === '200'){
        ElMessage.success('操作成功')
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }).catch()
}



</script>